<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>
        HIUI 前端页面框架 - 基础说明
    </title>
    <meta content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0 " name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <link rel="stylesheet" type="text/css" href="../../styles/hiui.css">
    <link rel="stylesheet" type="text/css" href="../../styles/site.css">

<body>
    
    <div class="site-header">
    <div class="site-container">
        <a class="logo">HIUI 前端框架</a>
    </div>
</div>
    <div class="site-container">
        <div class="site-tree">
            
<ul class="site-nav">
    
    <li class="site-nav-item">
        <h3 class="site-nav-title">基础说明</h3>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/info.html#start" class="site-nav-link">开始使用</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/info.html#module" class="site-nav-link">模块规范</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/info.html#issue" class="site-nav-link">常见问题</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/info.html#log" class="site-nav-link">更新日志</a>
    </li>
    
    
    <li class="site-nav-item">
        <h3 class="site-nav-title">基础组件</h3>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/base.html#normalize" class="site-nav-link">Normalize 排版</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/base.html#grid" class="site-nav-link">Grid 栅格系统</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/base.html#layout" class="site-nav-link">Layout 布局</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/base.html#font" class="site-nav-link">Font 字体图标</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/base.html#color" class="site-nav-link">Color 主题色彩</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/base.html#button" class="site-nav-link">Button 按钮</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/base.html#link" class="site-nav-link">Link 链接</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/base.html#animation" class="site-nav-link">Animation 动画</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/base.html#loading" class="site-nav-link">Loading CSS3 加载</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/base.html#assist" class="site-nav-link">Assist 辅助</a>
    </li>
    
    
    <li class="site-nav-item">
        <h3 class="site-nav-title">表格</h3>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/table.html#base" class="site-nav-link">Table 基础表格</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/table.html#responsive" class="site-nav-link">TableResponsive 数据表格</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/table.html#data" class="site-nav-link">DataTable 数据表格</a>
    </li>
    
    
    <li class="site-nav-item">
        <h3 class="site-nav-title">表单组件</h3>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/form.html#input" class="site-nav-link">Input 输入框</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/form.html#select" class="site-nav-link">Select 选择框</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/form.html#radio" class="site-nav-link">Radio 单选框</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/form.html#checkbox" class="site-nav-link">Checkbox 多选框</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/form.html#switch" class="site-nav-link">Switch 开关</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/form.html#autocomplete" class="site-nav-link">Autocomplete 自动完成</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/form.html#slider" class="site-nav-link">Slider 滑块</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/form.html#timepicker" class="site-nav-link">TimePicker 时间选择</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/form.html#rate" class="site-nav-link">Rate 评分</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/form.html#colorpicker" class="site-nav-link">ColorPicker 颜色选择器</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/form.html#inputnumber" class="site-nav-link">InputNumber 数字输入框</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/form.html#cascader" class="site-nav-link">Cascader 级联选择</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/form.html#transfer" class="site-nav-link">Transfer 穿梭框</a>
    </li>
    
    
    <li class="site-nav-item">
        <h3 class="site-nav-title">视图组件</h3>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#timeline" class="site-nav-link">Timeline 时间线</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#step" class="site-nav-link">Step 步骤条</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#tag" class="site-nav-link">Tag 标签</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#tag" class="site-nav-link">Badge 徽标数</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#alert" class="site-nav-link">Alert 警告框</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#avatar" class="site-nav-link">Avatar 头像</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#card" class="site-nav-link">Card 卡片</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#empty" class="site-nav-link">Empty 空状态</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#list" class="site-nav-link">List 列表</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#header" class="site-nav-link">Header 页头</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#article" class="site-nav-link">Article 文章</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#comment" class="site-nav-link">Comment 评论</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#skeleton" class="site-nav-link">Skeleton 骨架图</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#result" class="site-nav-link">Result 结果页</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#divider" class="site-nav-link">Divider 分割线</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#progress" class="site-nav-link">Progress 进度条</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#progress" class="site-nav-link">Tree 树形结构</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#progress" class="site-nav-link">Popover 气泡卡片</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#loadingbar" class="site-nav-link">LoadingBar 加载进度条</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#pagination" class="site-nav-link">Pagination 分页</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#message" class="site-nav-link">Message 全局提示</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#notice" class="site-nav-link">Notice 通知提醒</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#dialog" class="site-nav-link">Dialog 模态框</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#collapse" class="site-nav-link">Collapse 折叠面板</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#tooltip" class="site-nav-link">Tooltip 文字提示</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#poptip" class="site-nav-link">Poptip 气泡提示</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#carousel" class="site-nav-link">Carousel 走马灯</a>
    </li>
    
    
    <li class="site-nav-item">
        <h3 class="site-nav-title">导航组件</h3>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/nav.html#menu" class="site-nav-link">Menu 导航菜单</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/nav.html#dropdown" class="site-nav-link">Dropdown 下拉菜单</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/nav.html#tab" class="site-nav-link">Tab 标签页</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/nav.html#breadcrumb" class="site-nav-link">Breadcrumb 面包屑</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/nav.html#aside" class="site-nav-link">Aside 左右模态框</a>
    </li>
    
    
    <li class="site-nav-item">
        <h3 class="site-nav-title">操作反馈</h3>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/nav.html#menu" class="site-nav-link">Menu 导航菜单</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/nav.html#dropdown" class="site-nav-link">Dropdown 下拉菜单</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/nav.html#tab" class="site-nav-link">Tab 标签页</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/nav.html#breadcrumb" class="site-nav-link">Breadcrumb 面包屑</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/nav.html#aside" class="site-nav-link">Aside 左右模态框</a>
    </li>
    
    
    <li class="site-nav-item">
        <h3 class="site-nav-title">其他</h3>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/other.html#affix" class="site-nav-link">Anchor 锚点</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/other.html#affix" class="site-nav-link">Affix 图钉</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/other.html#backtop" class="site-nav-link">BackTop 返回顶部</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/other.html#upload" class="site-nav-link">Upload 文件上传</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/other.html#validation" class="site-nav-link">Validation 表单验证</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/other.html#template" class="site-nav-link">Template 模版引擎</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/other.html#code" class="site-nav-link">Code 代码修饰器</a>
    </li>
    
    
</ul>
        </div>
        <div class="site-content">
            <p class="site-info">hiui 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。hiui 首个版本发布于2016年金秋，她区别于那些基于 MVVM 底层的 UI 框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，她更多是为服务端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。</p>
            <div class="site-footer">
    <ul class="site-nav">
        <li class="site-nav-item">
            <a class="site-nav-link">案例</a>
        </li>
        <li class="site-nav-item">
            <a class="site-nav-link">联系</a>
        </li>
        <li class="site-nav-item">
            <a class="site-nav-link">GitHub</a>
        </li>
        <li class="site-nav-item">
            <a class="site-nav-link">码云</a>
        </li>
        <li class="site-nav-item">
            <a class="site-nav-link">微信公众号</a>
        </li>
    </ul>
    <p class="copyright">© 2018 <a href="/">http://www.hiui.com</a> MIT license</p>
</div>

        </div>
    </div>
    <script type="text/javascript" src="../../scripts/vendor.js"></script>
    <script type="text/javascript" src="../../scripts/site.js"></script>
</body>

</html>